<template>
	<view class="mainpadding">
		<view class="flexleft">
			<!-- 左侧 -->
			<view class="left_box">
				<view :class="item.id==currentid?'xuanzbox':'weixbox'" v-for="item in leftlist" :key="item.id" @click="changeleft(item.id)">{{item.name}}</view>
			</view>
			<!-- 右侧 -->
			<scroll-view scroll-y="true"  
				refresher-threshold="100" class="rightbox"  @scrolltolower="onReachBottomt">
				<view class="flexleft itembai " :class="index==0?'':'margin_top'" v-for="(item,index) in list.data" :key="item.id" @click="jumpdetail('/pages/index/shangpinxq?id=',item.id)">
					<image :src="item.image_text" class="leftListimg margin_right3" mode=""></image>
					<view class="flexcolumbet" style="height: 150rpx;">
						<view class="flexleft">
							<view class="titletext xiankuan bold xiaohei margin_right1" style="max-width: 200rpx;">{{item.name}}</view>
							<view class="huiyuan">会员</view>
						</view>
						<view class="flexleft">
							<view class="xiaohong main_size margin_right1">￥{{item.price}}起/台</view>
							<view class="xiaohui smalltext zhonghuax">￥{{item.market_price}}起/台</view>
						</view>
					</view>
				</view>
				
			</scroll-view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				leftlist:[],
				currentid:"",
				page: 1,
				limit: 12,
				list: {
					data: []
				},
			}
		},
		onLoad() {
			this.getclass()
		},
		methods: {
			changeleft(id){
				this.currentid = id
				this.init()
			},
			getclass() {
				httpRequest.request('/api/goodscl/goodsCategory', 'GET', {
				}).then(res => {
					this.currentid = res.data[0].id
					this.leftlist = res.data
					this.page = 1
					this.init()
				})
			},
			init(isPage, page) {
				let _this = this;
				let data = {
					page: page || 1,
					limit: _this.limit,
					category_id: this.currentid,
				}
				let url = '/api/goodscl/goodsIndex'
				httpRequest.request(url, 'GET', data, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							this.list = res.data
							_this.list.data = resList.data;
						}
					}
				})
			},
			onReachBottomt() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.huiyuan{
		background-color: #ff0000;
		color:#fff ;
		font-size: 24rpx;
		padding: 5rpx 15rpx;
		border-radius: 5rpx;
	}
	.itembai{
		padding: 8rpx;
		background-color: #fff;
	}
	.itembox{
		padding: 15rpx 40rpx;
		color: #333333;
		font-size: 30rpx;
		background-color: #fff;
		box-sizing: border-box;
		border: 1rpx solid #3B50FF;
	}
	.itemboxs{
		box-sizing: border-box;
		padding: 15rpx 40rpx;
		color: #fff;
		font-size: 30rpx;
		background-color: #3B50FF;
		border: 1rpx solid #3B50FF;
	}
	.beijingse1 {
		background-color: #f5f5f5;
		min-height: calc(100vh - 60rpx);
		height: auto;
	}

	.weixbox {
		padding: 30rpx;
		font-size: 24rpx;
		background-color: #F9F9F9;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #999999;
	}

	.xuanzbox {
		padding: 30rpx;
		border-left: 4rpx solid #3B50FF;
		font-size: 24rpx;
		background-color: #fff;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
	}

	.rightbox {
		position: fixed;
		left: 175rpx;
		top: 100rpx;
		height: calc(100vh - 100rpx);
		// padding: 5rpx 30rpx 30rpx;
		box-sizing: border-box;
		width: 74%;
		// background-color: #FFFFFF;
	}

	.left_box {
		position: fixed;
		left: 0;
		width: 23%;
		top: 100rpx;
		height: calc(100vh - 100rpx);
		overflow-y: auto;
		background: #F9F9F8;
		box-sizing: border-box;
	}
</style>
